@include("admin.header")
  <style>
      #demo2{
          display: flex;
          flex-wrap: wrap;
      }
      #demo2 .item{

        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      #demo2 .item img{
          height: 200px;
      }
      #demo2 .item i{
        position: absolute;
        top: -5px;
        right: -5px;
        font-size: 29px;
        color: lightpink;
        cursor: pointer;
      }
  </style>
  <body>
    <div class="x-body">
        <form class="layui-form" enctype="multipart/form-data">
            <div class="layui-form-item">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="images">选择图片</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo2">
                            @foreach($images as $val)
                            <div class="item">
                                <img src="/uploads/{{$val->images}}" alt=""  class="layui-upload-img">
                                <i class="layui-icon cencel">&#x1007;</i>
                            </div>
                            @endforeach
                        </div>
                    </blockquote>
                </div>
            </div>
            <input type="hidden" name="good_id" value="{{$good_id}}">
            <div class="layui-form-item" style="    position: absolute;bottom: 5em;right: 7em;">
                <button  class="layui-btn" lay-filter="add" lay-submit="" id="sub">
                    添加
                </button>
            </div>
      </form>
    </div>
    <div class="alert">
        提示信息
      </div>
      <style>
        .alert{
          position: fixed;
          width: 280px;
          height: 50px;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: 9999;
          color: #fff;
          text-align: center;
          line-height: 50px;
          font-size: 16px;
          display: none;
        }
      </style>
    <script>
        
        layui.use(['form','layer','upload'], function(){
            $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var upload = layui.upload;
            upload.render({
                elem: '#images',
                multiple: true,
                auto: false, //选择文件后不自动上传
                // bindAction: '#sub', //指向一个按钮触发上传
                choose: function(obj){
                    //将每次选择的文件追加到文件队列
                    var files = obj.pushFile();
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function(index, file, result){
                    // console.log(index); //得到文件索引
                    //得到文件对象
                    image.push(file);
                    // console.log(result); //得到文件base64编码，比如图片
                    $('#demo2').append('<div class="item"><img style="margin-right:10px" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"><i class="layui-icon cencel" style="opacity: 0;">&#x1007;</i></div>')
                    // $(".imgbox").html("<img style='display:block;width:400px' src='"+result+"'>");
                    });
                }
            });
            var image = [];
            //监听提交
            form.on('submit(add)', function(data){
                // data.field.file = image;
                var good_id = $("input[name='good_id']").val();
                for (let i = 0; i < image.length; i++) {
                    var formData = new FormData();
                    formData.append('main_img', image[i]);
                    formData.append("good_id",good_id);
                    
                    $.ajax({
                        url:"/admin/todo_addimgs",
                        type:"post",
                        data: formData,
                        contentType: false,
                        processData: false,
                        dataType:"json",
                        success: function(res) {
                            if(res.code==1){
                               $("img[alt='"+image[i].name+"']").attr("src","/uploads/"+res.name);
                               $("img[alt='"+image[i].name+"']").siblings("i").css("opacity","1");
                            }else{
                                layer.alert(res.msg);
                            }
                        },
                        error:function(data) {
                            $(".alert").html("服务器错误！").css({"background-color":"#41b314bb","border-color":"#3ca512bb"}).stop().fadeIn(500);
                                setTimeout(function () {
                                $(".alert").fadeOut(500);
                            },2000)
                        }
                    });
                    
                }
                
                //发异步，把数据提交给php
                
                return false;
            });
            $(document).on("click",".cencel",function(){
                var path = $(this).siblings("img").attr("src");
                var that = this;
                $.ajax({
                    url:"/admin/todo_delgoodimg",
                    type:"get",
                    data:"path="+path,
                    dataType:"json",
                    success:function(res){
                        if (res.code==1) {
                            $(".alert").html(res.msg).css({"background-color":"#41b314bb","border-color":"#3ca512bb"}).stop().fadeIn(500);
                                setTimeout(function () {
                                $(".alert").fadeOut(500);
                            },2000);
                            $(that).parents(".item").remove();
                        }else{
                            $(".alert").html(res.msg).css({"background-color":"#41b314bb","border-color":"#3ca512bb"}).stop().fadeIn(500);
                                setTimeout(function () {
                                $(".alert").fadeOut(500);
                            },2000);
                        }
                    }
                })
            });
        });
    </script>
  </body>

</html>